import React, { useEffect, useState } from 'react';
import { DeleteOutlined, FormOutlined } from '@ant-design/icons';
import TableHeader from '../../../component/TableHeader';
import { Input, Table } from 'antd';
import { sale_discount_list, sale_discount_search, sale_discount_feng } from '../../../utils/sale';
import '../../../style/time.scss'
import { useNavigate } from 'react-router-dom';
function Time(props) {
    var [data, setData] = useState([])
    var [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 50 })
    var push = useNavigate()
    const { Search } = Input;
    var jump = (record) => {
        push({ pathname: '/index/sale/detail', search: `?data=${record.id}` })
    }
    const columns = [
        {
            title: '活动名称',//表格列的名字(显示在表格头上)
            dataIndex: 'name',//数据对应的属性名
            // key: 'name' //key是必须的,每一列不同.
        },
        {
            title: '原价（元）',
            dataIndex: 'oripice',

        },
        {
            title: '折扣价（元）',
            dataIndex: 'nowpice',
            // key: 'Range'
        },
        {
            title: '库存',
            dataIndex: 'stock',
            // key: 'status'
        },
        {
            title: '活动状态',
            dataIndex: "status",
            // key: 'time'
        },
        {
            title: '有效期',
            dataIndex: "time",
            // key: 'time'
        },
        {
            title: '操作',
            render: (_, record) => (
                <>
                    <p className='detail' onClick={() => { jump(record) }} style={{ color: "#1677ff" }}>查看详情</p>
                </>
            ),
        },
    ];
    //列表接口
    useEffect(() => {
        sale_discount_list().then((res) => {
            setData(res.data)
        })
    }, [])
    //搜索接口
    const onSearch = (value) => {
        sale_discount_search({ name_like: value }).then((res) => {
            console.log(res.data);
            setData(res.data)
        })
    };
    //分页
    const handleChange = (pagination) => {
        setPagination(pagination)
        sale_discount_feng({ _page: pagination.current, _limit: pagination.pageSize }).then((res) => {
            sale_discount_list().then((res) => {
                setData(res.data)
            })
        })
    }
    return (
        <div className='time'>
            <TableHeader header={"营销 / 限时折扣"} name={"限时折扣"}></TableHeader>
            <Search
                placeholder="请输入搜索名称"
                allowClear
                enterButton="Search"
                style={{ width: 400, marginLeft: 10 }}
                onSearch={onSearch}
            />
            <Table columns={columns} pagination={pagination} dataSource={data} onChange={handleChange}></Table>
        </div>
    );
}

export default Time;